<template>
    <div class="home-main flex">
        <div class="home-left flex-item">
            <div class="home-link">
                <el-row :gutter="10">
                    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                        <div class="grid-content">
                            <div class="shortcutBtn">
                                <img style="width:60px;height:60px;" src="../../public/static/image/zc.png" alt="">
                                <div class="shortcutBtn-box hidden-md-only">
                                    <span>资产汇总</span>
                                    <p>
                                        <countTo :startVal='startVal' :endVal='summary.assets' :duration='3000'>
                                        </countTo>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <div class="shortcutBtn">
                                <img style="width:60px;height:60px;" src="../../public/static/image/kh.png" alt="">
                                <div class="shortcutBtn-box">
                                    <span>客户汇总</span>
                                    <p>
                                        <countTo :startVal='startVal' :endVal='summary.customer' :duration='3000'>
                                        </countTo>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <div class="shortcutBtn">
                                <img style="width:60px;height:60px;" src="../../public/static/image/sbsl.png" alt="">
                                <div class="shortcutBtn-box">
                                    <span>设备数量</span>
                                    <p>
                                        <countTo :startVal='startVal' :endVal='summary.equipment' :duration='3000'>
                                        </countTo>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <div class="shortcutBtn">
                                <img style="width:60px;height:60px;" src="../../public/static/image/sbzt.png" alt="">
                                <div class="shortcutBtn-box">
                                    <span>设备状态</span>
                                    <el-tooltip placement="top">
                                        <div slot="content">{{'在线设备' + summary.onLine}}<br/>{{'离线设备' + summary.offLine}}</div>
                                        <p>
                                            {{ summary.equipmentState }}
                                        </p>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- <div class="home-slecete">
                当前年份：2022
            </div> -->
            <div class="home-chart">
                <el-row :gutter="20" class="margin-bottom20">
                    <el-col :span="16">
                        <div class="grid-content chart-1 ui-flex-column">
                            <div class="ui-flex_item">
                                <div class="chart-item" id="chart_1" style="height:300px;"></div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content chart-1 ui-flex-column">
                            <div class="ui-flex_item">
                                <div class="chart-item" id="chart_2" style="height:300px;"></div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { getCount } from '@/api/api'
import * as echarts from 'echarts'
import countTo from 'vue-count-to'// 引入组件

export default {
  name: 'home',
  components: { countTo }, // 然后注册
  data () {
    return {
      startVal: 0,
      endVal: 2020,
      summary: {
        customer: 0, // 客户
        equipment: 0, // 设备
        assets: 0, // 资产
        equipmentState: 0, // 设备状态
        onLine: 0, // 在线
        offLine: 0 // 离线
      },
      // 综合汇总
      multipleSummary: []
    }
  },
  created () {
    this.initChart()
  },
  mounted () {
    this.setEstatesOverview()
  },
  methods: {
    initChart () {
      getCount().then(res => {
        const item = res.deviceCollectVO
        const onLine = item.cameraOnlineCount + item.guardOnlineCount // 摄像头在线数量 + 门禁机在线数量
        this.summary = {
          customer: item.customerCount,
          equipment: item.equipmentCount,
          assets: item.assetsCount,
          equipmentState: onLine + '/' + item.equipmentCount,
          onLine,
          offLine: item.cameraOffline + item.guardOffline // 摄像头离线数量 + 门禁机离线数量
        }
      })
    },
    setEstatesOverview () {
      const chartDom_1 = document.getElementById('chart_1')
      const chartDom_2 = document.getElementById('chart_2')
      const myChart_1 = echarts.init(chartDom_1)
      const myChart_2 = echarts.init(chartDom_2)
      let option_1
      let option_2

      option_1 = {
        title: {
          text: '综合汇总（2022）'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['资产', '客户', '设备']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '资产',
            type: 'line',
            stack: 'Total',
            data: [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1]
          },
          {
            name: '客户',
            type: 'line',
            stack: 'Total',
            data: [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1]
          },
          {
            name: '设备',
            type: 'line',
            stack: 'Total',
            data: [1, 3, 1, 1, 5, 3, 3, 7, 2, 4, 5, 3]
          }
        ]

      }

      option_2 = {
        title: {
          text: '设备报警汇总（2022）'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '设备报警',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410, 210, 210, 210, 210, 210]
          }
        ]
      }

      option_1 && myChart_1.setOption(option_1)
      option_2 && myChart_2.setOption(option_2)
      window.onresize = function () {
        // echarts图表自适应resize方法
        myChart_1.resize()
        myChart_2.resize()
      }
    }
  }
}
</script>

<style scoped>
.home-main {
    color: #666;
    min-height: 100%;
}

.home-left {
    padding: 35px;
    border-right: 1px solid #eee;
}

.home-right {
    flex: 0 0 300px;
    max-width: 300px;
}

.home-number {
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}

.home-number .bigNumber {
    font-size: 46px;
    line-height: 1;
}

.home-slecete {
    padding: 20px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.home-number .gridTitle {
    margin-top: 5px;
    color: #666;
}

.home-link {
    padding: 15px 0px 50px 0;

}

.shortcutBtn {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    cursor: pointer;
}

.shortcutBtn-box {
    margin-left: 20px;
}

.shortcutBtn-box span,
p {
    color: #fff;
    font-size: 18px;
}

.home-link .el-col:nth-child(1) .shortcutBtn {
    background: linear-gradient(90deg, #5AF4CD 0%, #7FC5FF 100%);
}

.home-link .el-col:nth-child(2) .shortcutBtn {
    background: linear-gradient(90deg, #7DC6FF 0%, #7C88F1 100%);
}

.home-link .el-col:nth-child(3) .shortcutBtn {
    background: linear-gradient(90deg, #8B98FA 0%, #FB8AF4 100%);
}

.home-link .el-col:nth-child(4) .shortcutBtn {
    background: linear-gradient(90deg, #FB8AF2 0%, #FC8289 99%);
}

.shortcutBtn a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    display: inline-block;
    position: relative;
}

.home-chart .grid-content {
    padding-top: 20px;

}

.home-chart .el-col:first-child .grid-content {
    border-right: 1px solid #eee;
}

.chart-title {
    margin-bottom: 10px;
}

.home-right-chart .grid-content {
    padding: 35px 20px;
}

.home-right-chart .grid-content:first-child {
    border-bottom: 1px solid #eee;
}
</style>
